<template>
  <div class="about">
     <my-header :roles="roles" @cut="filt"></my-header>
     <div class="content">
       <my-table :tableData="tableData" :showNum="type"></my-table>
     </div>
  </div>
</template>
<script>
import MyHeader from '../components/myHeader';
import myTable from '../components/myTable';
import axios from 'axios';
import { ref } from 'vue';
export default {
  components:{ MyHeader,myTable},
  setup(props) {
    const roles = ref([]);
    const tableData = ref([]);
    const type = ref(1);
    axios.get('tableData.json').then(res => {
      tableData.value = res.data;
    })
    axios.get('roles.json').then(res => {
      roles.value = res.data;
    })
    const filt = (val) => { // 子传父的事件
      type.value = val;
    }
    return {
      roles,
      filt,
      tableData,
      type
    }
  }
}


// let obj = { name: '张三' };
// let obj1 = JSON.parse(JSON.stringify(obj));
// obj1.name = '李四';
// console.log(obj);
</script>

<style lang="scss" scoped>
.about{
  height: 100%;
  .content{
    height: calc(100% - 60px);
  }
}
</style>

